<template>
    <div class="main-container" style="height: 100%;background: white;">
  
            <a-tabs   :lazy-load="true" type="card"  @change="tabsChange" justify>
                    <a-tab-pane title="结算类型" key="1" v-if="permissionStore.hasPermisson('jczl.jslx')">
                            <div style="height: 100%">
                                <SettlementType></SettlementType>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="供应商资料" key="2" v-if="permissionStore.hasPermisson('jczl.gyszl')">
                            <div style="height: 100%">
                                <Supplier></Supplier>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="采购类型" key="3" v-if="permissionStore.hasPermisson('jczl.cglx')">
                            <div style="height: 100%">
                                <ProcurementType></ProcurementType>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="物流类型" key="4" v-if="permissionStore.hasPermisson('jczl.wllx')">
                            <div style="height: 100%">
                                <DeliveryType></DeliveryType>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="物料资料" key="5" v-if="permissionStore.hasPermisson('jczl.wlzl')" >
                            <div style="height: 100%">
                                <Information></Information>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="物料规格" key="6" v-if="permissionStore.hasPermisson('jczl.wlgg')">
                            <div style="height: 100%">
                                <MaterialSpecification></MaterialSpecification>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="物料成分" key="7" v-if="permissionStore.hasPermisson('jczl.wlcf')">
                            <div style="height: 100%">
                                <MateriaPart></MateriaPart>
                            </div>
                    </a-tab-pane>
                    <a-tab-pane title="收货地址" key="8">
                            <div style="height: 100%">
                                <DeliveryAddress></DeliveryAddress>
                            </div>
                    </a-tab-pane>
            </a-tabs>
    </div>
</template>

<script lang="ts">
    import { defineComponent,reactive, ref } from 'vue'
    import SettlementType from '@/components/pcsingmagent/SettlementType.vue'
    import Supplier from '@/components/pcsingmagent/Supplier.vue'
    import ProcurementType from '@/components/pcsingmagent/ProcurementType.vue'
    import DeliveryType from '@/components/pcsingmagent/DeliveryType.vue'
    import Information from '@/components/pcsingmagent/Information.vue'
    import MaterialSpecification from '@/components/pcsingmagent/MaterialSpecification.vue'
    import MateriaPart from '@/components/pcsingmagent/MateriaPart.vue'
    import DeliveryAddress from '@/components/pcsingmagent/DeliveryAddress.vue'
    import emitter from '@/hooks/useEventBus'
    import usePermission from '@/store/modules/permission'
   export default defineComponent({
       name:'BasicData',
       components:{
        SettlementType,
        Supplier,
        ProcurementType,
        DeliveryType,
        Information,
        MaterialSpecification,
        MateriaPart
       },
       setup(){
     
       const pageData = reactive({
            tableIndex:"1"
       })

  
       const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
           if (e === '1') {
               emitter.emit('SettlementType')
           }else if(e === '2'){
               emitter.emit('Supplier')
           }else if(e === '3'){
               emitter.emit('ProcurementType')
           }else if(e === '4'){
               emitter.emit('DeliveryType')
           }else if(e === '5'){
               emitter.emit('Information')
           }else if(e === '6'){
               emitter.emit('MaterialSpecification')
           }else if(e === '7'){
               emitter.emit('MateriaPart')
           }else if(e === '8'){
               emitter.emit('DeliveryAddress')
           }
        }
        const permissionStore = usePermission()
        return{
            pageData,
            tabsChange,
            permissionStore
        }
       }
   })
</script>
<style scoped>

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>